$(document).ready(function(){
	
	$(".fillformanim:not(.fillform-1)").css("opacity", 0.2);
	$(".okButton").hide();
	$("#finishmap :button").hide();
	$("#finishmap :submit").hide();

	/// form 1
	$("input.fillform-1").keyup(function(){
		if($(this).val().length < 5){
			$("img.okButton-1").fadeOut(100);
		}
		else if($(this).val().length > 4){
			$("img.okButton-1").fadeIn(500);
		}
	});
	$("img.okButton-1").click(function(){
		$(this).fadeOut();
	
		$(".fillform-1").animate({
			opacity : 0.5
		}, 500).attr('readonly', 'readonly');
		$(".fillform-2").animate({
			opacity : 1
		}, 500);
	});
	/// form 2
	$("input.fillform-2").keyup(function(){
			if($(this).val().length < 5){
				$("img.okButton-2").fadeOut(100);
			}
			else if($(this).val().length > 4){
				$("img.okButton-2").fadeIn(500);
			}
	});
	$("img.okButton-2").click(function(){
		$(this).fadeOut();
	
		$(".fillform-2").animate({
			opacity : 0.5
		}, 500).attr('readonly', 'readonly');
		$(".fillform-3").animate({
			opacity : 1
		}, 500);
	});
	/// form 3
	$("select.fillform-3").change(function(){
		$("img.okButton-3").fadeIn(500);
	});		
	$("img.okButton-3").click(function(){
		$(this).fadeOut();	
		$(".fillform-3").animate({
			opacity : 0.5
		}, 500).attr('readonly', 'readonly');
		$("input#newprovince").show();
		$(".fillform-4").animate({
			opacity : 1
		}, 500);
	});
	/// form 4
	$("input#newprovince").click(function(){
		fadeInProvinceInput();
	});
	//form 5
	$("input#newflag").click(function(){
		fadeInNewFlagInput();
	});
	
	
	function fadeInProvinceInput(){
		$("input#newprovince").animate({
			opacity : 0.0
		}, 500).attr('readonly', 'readonly');
		$(".fillform-4").animate({
			opacity : 0.0
		}, 500);
		$("input#newflag").show().animate({
			opacity : 1
		});
		
		$("input#newprovince").click(function(){
			fadeInProvinceInput();
		});
	}
	function fadeInNewFlagInput(){
		$("input#newflag").animate({
			opacity : 0.0
		}, 500).attr('readonly', 'readonly');
		$(".fillform-2").animate({
			opacity : 1
		}, 500).attr('readonly', '');
		$("label.fillform-2").empty();
		$("label.fillform-2").append("add new province");
		$("input#submitmap").show().animate({
			opacity : 1
		});
	}
	
	
	
});